<!-- 素材库-素材移动分组 -->
<template>
  <a-modal
    :maskClosable="false"
    :title="title"
    centered
    :width="500"
    v-model="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
  >
  <a-form-model ref="ruleForm" :model="form" :rules="rules" :labelCol="{ span: 5 }" :wrapperCol="{ span: 19 }">
      <div class="tc _pb-20">将选中的 <span class="colorZS">{{ checkedIds.length }}</span> {{activeTabKey === fileTypeEnums.IMAGE ? '张图片' : '个视频'}}移动到</div>
      <a-form-model-item v-if="visible" label="选择分组" prop="parentId">
        <GroupSelect v-model="form.groupId" :activeTabKey="activeTabKey" undistributed placeholder="请选择素材存放分组" />
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>
<script>
import GroupSelect from './groupSelect'
import { moveWarehouse } from '@/api/content/warehouse'
import { fileTypeEnums } from '@/enums/content'

export default {
  components: {
    GroupSelect
  },
  props: {
    activeTabKey: {
      type: String,
      required: true,
      default: ''
    },
    // 已勾选数组
    checkedIds: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      fileTypeEnums,
      title: '移动分组',
      visible: false,
      confirmLoading: false,
      form: {
        groupId: '',
      },
      rules: {
        groupId: [{ required: true, message: '请选择素材存放分组', trigger: 'change' }],
      }
    }
  },
  methods: {
    show() {
      this.visible = true
    },
    handleSubmit() {
      const that = this;
      let params = {
        moveGroupId: that.form.groupId,
        ids: that.checkedIds
      }
      moveWarehouse(params).then(res=>{
        that.$emit('refresh');
        that.$message.success('移动分组成功!');
        Object.assign(this.$data, this.$options.data());
      })
    }
  },
}
</script>
<style lang="less" scoped>
.tc{
  text-align: center;
}
</style>